import React, { useEffect, useState } from 'react';
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { getvisitorlist } from '@/api/service';
import { useAddKey } from '@/hooks/useKey';

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
}
// http://fangadmin.shbwyz.com//static/common/images/visitor.jpg
const columns: ColumnsType<DataType> = [
  {
    title: 'ID',
    dataIndex: 'vid',
    key: 'vid',
  },
  {
    title: '游客id',
    dataIndex: 'visitor_id',
    key: 'visitor_id',
  },
  {
    title: '游客名称',
    dataIndex: 'visitor_name',
    key: 'visitor_name',
  },
  {
    title: '游客头像',
    dataIndex: 'visitor_avatar',
    key: 'visitor_avatar',
    render: (text) => (
      <img
        style={{ width: 50, height: 50 }}
        src={`http://fangadmin.shbwyz.com/` + text}
        alt=""
      />
    ),
  },
  {
    title: '在线状态',
    dataIndex: 'online_status',
    key: 'online_status',
    render: (text) => (
      <span>
        {text === 1 ? (
          <Tag color="success">在线</Tag>
        ) : (
          <Tag color="error">离线</Tag>
        )}
      </span>
    ),
  },
  {
    title: 'IP',
    dataIndex: 'visitor_ip',
    key: 'visitor_ip',
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time',
  },
];

type Props = {};

const visitorlist = (props: Props) => {
  const [data, setData]: any = useState([]);
  useEffect(() => {
    getvisitorlist().then((res) => {
      setData(useAddKey(res.data.data));
      console.log(res.data.data);
    });
  }, []);
  return (
    <div>
      <Table
        columns={columns}
        dataSource={data}
        pagination={{
          total: data.length,
          pageSize:5,
          showQuickJumper: true,
          pageSizeOptions: [5, 10, 20],
        }}
      />
    </div>
  );
};

export default visitorlist;
